import React, { useEffect, useState}  from 'react';
import { Input, Button, Table, Switch, Modal } from 'antd'

import * as service from  '../../api/chen/index'

import '../../styles/chen/systemtag.scss'
import { useNavigate } from 'react-router-dom';


interface Props{

}
const {Search}=Input
function SystemTag(props: Props) {
  var navigate=useNavigate()
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [data, setData]=useState([])
  useEffect(() => {
    service.title_list().then(res => {
      console.log(res)
      setData(res.data)
    })
   
  },[])
  const myDelete = (row:any) => {
    service.title_delete({ id: row.id}).then((res) => {
      console.log(res)
    })
    setTimeout(() => {
      navigate(0)
  }, 1000)
  }
 
    // const data = [
    //     {
    //      id: '1',
    //       name: 'John Brown',
    //       person: "32",
    //       endingtime: 'New York No. 1 Lake Park',
    //         condition: '',
    //         description:''
    //     },
    //     {

    //      id: '2',
    //       name: 'Jim Green',
    //       person: "42",
    //       endingtime: 'London No. 1 Lake Park',
    //       condition: '',
    //       description:''
    //     },
    //     {
    //      id: '3',
    //       name: 'Joe Black',
    //       person: "32",
    //       endingtime: 'Sidney No. 1 Lake Park',
    //       condition: '',
    //         description:''
    //     },
    //   ];
      const columns= [
        {
          title: '编号',
          dataIndex: 'id',
          key: 'id',
        
        },
        {
          title: '标签名称',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: '添加人',
          dataIndex: 'person',
          key: 'person',
        },
        {
          title: '最后修改时间',
          dataIndex: 'endingtime',
          key: 'endingtime',
        },
        {
            title: '使用状态',
              render: (_: any, row: any) => {
                  return (
                      <>
                    <Switch checkedChildren="启用" unCheckedChildren="禁用" defaultChecked />
                  </>
               )
           }
          },
        {
          title: '操作',
            render: (_: any, row: any) => {
                return (
                    <>
                 <span style={{marginRight:10,color:'blue'}} onClick={showModal}>编辑</span>
                        <span  style={{color:'red'}} onClick={()=>{myDelete(row)}} >删除</span>
                </>
             )
         }
        },
       
       
       
    ];
   

  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = (value:any) => {
    service.title_add().then(res => {
      console.log(res)
      var obj = {
        "id": res.data.id,
        "name": value,
        "person":"李明明"
        

      }
    })
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
    
  };
      const onSearch = (value: string) => console.log(value);

    return (
        <div className='system-tag'> 
             <h4 className='title-system'>标签管理</h4>
            <div className='title-header' >
                <Search placeholder="请输入关键字" allowClear onSearch={onSearch} style={{ width: 400 }} />
                <Button type="primary" onClick={showModal}>
          新增标签
        </Button>
            </div>
            <Table columns={columns} dataSource={data} />
            <Modal title="编辑标签" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
           标签名称 <Input placeholder="请输入" style={{width:200}} />
      </Modal>
        </div>
    );
}

export default SystemTag;